<template>
  <div class="numAdd">
    <div class="return" @click="handleReturn">返回</div>
    <div class="numAdd-main">
      <!-- 
          :label-position:对齐方式
      -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules" ref="form"
        :label-position="right" label-width="110px">
        <h3>房号信息</h3>
        <div class="item-box">
          <el-form-item label="单元名称" prop="communityname">
            <el-input v-model="formInline.communityname"></el-input>
          </el-form-item>
          <el-form-item label="幢号" prop="buildnum">
            <el-input v-model="formInline.buildnum"></el-input>
          </el-form-item>
          <el-form-item label="楼层号" prop="storeynum">
            <el-input v-model="formInline.storeynum"></el-input>
          </el-form-item>
          <el-form-item label="房号" prop="homenum">
            <el-input v-model="formInline.homenum"></el-input>
          </el-form-item>
          <el-form-item label="住客姓名" prop="homename">
            <el-input v-model="formInline.homename"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="homestatus">
            <el-select v-model="formInline.homestatus">
              <el-option label="已入住" value="1"></el-option>
              <el-option label="未入住" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋信息" prop="homemessage">
            <el-input v-model="formInline.homemessage"  type="textarea" placeholder="请输入房屋信息"></el-input>
          </el-form-item>
          <el-form-item label="房屋成员" prop="homesuggestion">
            <el-input v-model="formInline.homesuggestion"  type="textarea" placeholder="请输入房屋成员"></el-input>
          </el-form-item>
        </div>
        <h3>智能设备</h3>
        <div class="item-box">
          <el-form-item label="洗衣机数量" prop="airnum">
            <el-input v-model="formInline.airnum"></el-input>
          </el-form-item>
          <el-form-item label="WI-FI名称" prop="wifiname">
            <el-input v-model="formInline.wifiname"></el-input>
          </el-form-item>
          <el-form-item label="空调数量" prop="washnum">
            <el-input v-model="formInline.washnum"></el-input>
          </el-form-item>
          <el-form-item label="智能设备状态" prop="smartstatus">
            <el-select v-model="formInline.smartstatus">
              <el-option label="完好" value="1"></el-option>
              <el-option label="待维修" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <h3>家居设备</h3>
        <div class="item-box">
          <el-form-item label="书桌数量" prop="homedesk">
            <el-input v-model="formInline.homedesk"></el-input>
          </el-form-item>
          <el-form-item label="椅子数量" prop="homechair">
            <el-input v-model="formInline.homechair"></el-input>
          </el-form-item>
          <el-form-item label="衣橱数量" prop="homeclothes">
            <el-input v-model="formInline.homeclothes"></el-input>
          </el-form-item>
          <el-form-item label="家居设备状态" prop="familystatus">
            <el-select v-model="formInline.familystatus">
              <el-option label="完好" value="1"></el-option>
              <el-option label="待维修" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item class="button">
          <el-button type="success" @click="onSubmit(1)" :icon="icon">保存</el-button>
          <el-button type="primary" @click="onSubmit(2)">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      icon: "",
      formInline: {
        // 单元名称
        communityname: "",
        // 幢号
        buildnum: "",
        // 楼层号
        storeynum: "",
        // 房号
        homenum: "",
        // 住客姓名
        homename: "",
        // 状态
        homestatus: "",
        // 房屋信息
        homemessage: "",
        // 房屋成员
        homesuggestion: "",
        // 洗衣机数量
        airnum: "",
        // WI-FI名称
        wifiname: "",
        // 空调数量
        washnum: "",
        // 智能设备状态
        smartstatus: "",
        // 书桌数量
        homedesk: "",
        // 椅子数量
        homechair: "",
        // 衣橱数量
        homeclothes: "",
        // 家居设备状态
        familystatus: "",
        // 
        homeaddress: "",
      },
      rules: {
        communityname: [
          // required 必填 message：消息提示 trigger：失去焦点的时候触发
          { required: true, message: '请输入单元名称', trigger: 'blur' },
        ],
        buildnum: [
          { required: true, message: '请输入幢号', trigger: 'blur' },
        ],
        storeynum: [
          { required: true, message: '请输入楼层号', trigger: 'blur' },
        ],
        homenum: [
          { required: true, message: '请输入房号', trigger: 'blur' },
        ],
        homename: [
          { required: true, message: '请输入住客姓名', trigger: 'blur' },
        ],
        homestatus: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
        homemessage: [
          { required: true, message: '请输入房屋信息', trigger: 'blur' },
        ],
        homesuggestion: [
          { required: true, message: '请输入房屋成员', trigger: 'blur' },
        ],
        airnum: [
          { required: true, message: '请输入洗衣机数量', trigger: 'blur' },
        ],
        wifiname: [
          { required: true, message: '请输入WI-FI名称', trigger: 'blur' },
        ],
        washnum: [
          { required: true, message: '请输入空调数量', trigger: 'blur' },
        ],
        smartstatus: [
          { required: true, message: '请选择智能设备状态', trigger: 'blur' },
        ],
        homedesk: [
          { required: true, message: '请输入书桌数量', trigger: 'blur' },
        ],
        homechair: [
          { required: true, message: '请输入椅子数量', trigger: 'blur' },
        ],
        homeclothes: [
          { required: true, message: '请输入衣橱数量', trigger: 'blur' },
        ],
        familystatus: [
          { required: true, message: '请选择家居设备状态', trigger: 'blur' },
        ],

      },
    }
  },
  methods: {
    // 返回
    handleReturn(){
      this.$router.go(-1)
    },
    // 调详情
    handleServe() {
      this.$axiosToken({
        url: '/house/getDetailId',
        method: 'get',
        data: { id: this.$route.query.id },
        success: (result) => {
          this.formInline = result[0]
          console.log(this.formInline);

        }
      })
    },
    onSubmit(val) {
      if (val == 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.icon = "el-icon-loading"
            // 保存编辑，更新数据
            this.$axiosToken({
              url: '/house/updatenumList',
              method: 'post',
              data: {
                id: this.$route.query.id,
                unitname: this.formInline.unitname,
                buildnum: this.formInline.buildnum,
                storeynum: this.formInline.storeynum,
                homenum: this.formInline.homenum,
                homename: this.formInline.homename,
                homestatus: this.formInline.homestatus,
                homemessage: this.formInline.homemessage,
                homesuggestion: this.formInline.homesuggestion,
                airnum: this.formInline.airnum,
                wifiname: this.formInline.wifiname,
                washnum: this.formInline.washnum,
                smartstatus: this.formInline.smartstatus,
                homedesk: this.formInline.homedesk,
                homechair: this.formInline.homechair,
                homeclothes: this.formInline.homeclothes,
                familystatus: this.formInline.familystatus,
                h_id: this.formInline.id,
                homeaddress: "",
              },
              success: (result) => {
                this.$router.push("/house/number")
                this.$message({
                  showClose: true,
                  message: '编辑成功',
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        // 返回
        this.$router.go(-1)
      }
    }
  },
  mounted() {
    this.handleServe()
  }
}
</script>
<style lang="scss" scoped>
.numAdd::v-deep {
  .return {
    color: dodgerblue;
    font-size: 14px;
  }

  .numAdd-main {
    margin-top: 20px;

    h3 {
      border-left: 5px solid #20a0ff;
      padding-left: 10px;
    }

    .item-box {
      padding: 20px 10px 20px 60px;
    }

    .el-form {
      .el-form-item {
        margin-right: unset;
        width: 50%;
        &:nth-child(7),
        &:nth-child(8){
          width: 100%;
          .el-form-item__content{
            width: 90%;
            .el-textarea__inner{
              height: 140px;
            }
          }
        }
      }

      .el-form-item--small {
        .el-form-item__content {
          width: 80%;

          .el-select {
            width: 100%;
          }
        }
      }
    }
    .button{
      text-align: right;
      .el-form-item__content{
        padding-right: 40px;
      }
    }
  }
}
</style>